<template>
	<view class="pad-30">
		<u-navbar :title="$t('loginPage.choice')" placeholder bgColor="#0fbc96" leftIconColor="#FFFFFF"
			titleStyle="color: #FFFFFF" autoBack>
		</u-navbar>
		<view class="bg-main pad-30 radius30 color-fff">
			<u-radio-group v-model="radioValue" placement="column" iconPlacement="right">
				<u-radio labelColor="#000" v-for="(item, index) in radioList" :key="index" :label="item.name"
					:name="item.value">
				</u-radio>
			</u-radio-group>
		</view>

		<u-button class="font-32 mar-top-100" color="#ffc820" :customStyle="customStyle" shape="circle"
			@click="confirm">{{$t('confirm')}}</u-button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n';

	const {
		locale
	} = useI18n();

	const customStyle = {
		color: '#000000',
		borderRadius: '20rpx',
		boxShadow: '0 1.2077vw 10rvw rgba(75, 98, 157, .11)'
	}
	const CUSTOM_LANG = {
		"zh-Hant": "zh_CN",
		"en": "en"
	}
	const radioValue = ref(uni.getStorageSync('locale') || uni.getLocale() || 'zh-Hant');
	// 数据
	const radioList = reactive([{
			name: '繁体中文',
			value: 'zh-Hant'
		},
		{
			name: 'English',
			value: 'en'
		}
	]);

	// 切换语言
	const confirm = () => {
		locale.value = radioValue.value;
		uni.setStorageSync('locale', radioValue.value);
		// window.location.reload();
	}
</script>

<style lang="scss" scoped>
	:deep(.u-radio) {
		padding: 25rpx 0;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
	}
</style>